<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>图片切换</title>
    <style>
        * { margin: 0; padding: 0;}
        a { text-decoration: none;}
        #pic { position: relative; margin: 50px auto 0; width: 300px;}
        #pic p { width: 300px; height: 30px; line-height: 30px; text-align: center; background: #000000; color: #ffffff;}
        #back, #next { position: absolute; top: 40%; width: 30px; height: 30px; font-size: 20px;font-weight: bold; color: #ffffff;border: 1px solid #ffffff; text-align: center; line-height: 30px; opacity: 0.3;filter: alpha(opacity=30);}
        #back:hover, #next:hover { opacity: 1;filter: alpha(opacity=100);}
        #back { left: 0; }
        #next { right: 0;}
    </style>
    <script>
        window.onload = function(){
            var oNum = document.getElementById('num');
            var oStr = document.getElementById('str');
            var oImg = document.getElementById('img');
            var oBack = document.getElementById('back');
            var oNext = document.getElementById('next');

            var oBut = document.getElementById('but1');
            var oBut1 = document.getElementById('but2');

            var arrUrl = ['pic/101.jpg','pic/102.jpg','pic/103.jpg','pic/104.jpg'];
            var arrTxt = ['图片一','图片二','图片三','图片四'];

            var num = 0;
            var onOff = false;

            //初始化数据
            function fn(){
                oImg.src = arrUrl[num];
                oNum.innerHTML = 1 + num + '/' + arrUrl.length;
                oStr.innerHTML = arrTxt[num];
            }
            fn();
            oBut.onclick = function(){
                onOff = true;
            };
            oBut1.onclick = function(){
                onOff = false;
            };
            oBack.onclick = function(){
                num--;
                if(num == -1){
                    if(onOff){
                        num = arrUrl.length-1;
                        fn();
                    }else{
                        num = 0;
                    }
                }else if(num != arrUrl.length){
                    fn();
                }
            };
            oNext.onclick = function(){
                num++;
                if(num < arrUrl.length){
                    fn();
                }else if(num == arrUrl.length){
                    if(onOff){
                        num = 0;
                        fn();
                    }else{
                        num = arrUrl.length-1;
                    }
                }
            };
        }
    </script>
</head>
<body>
<label>
    <input id="but1" type="button" value="循环切换"/>
</label>
<label>
    <input id="but2" type="button" value="顺序切换"/>
</label>
    <div id="pic">
        <p id="num">正在加载中……</p>
        <img id="img" src="" alt="正在加载中……" />
        <p id="str">正在加载中……</p>
        <a id="back" href="javascript:"><</a>
        <a id="next" href="javascript:">></a>
    </div>
</body>
</html>